<template>
  <div class="policy_page">
    <el-card>
      <el-form :inline="true">
        <el-form-item label-width="80px" label="策略搜索">
          <el-input
            placeholder="请输入策略名称"
            v-model="form.policyName"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" class="search" @click="search"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top: 25px">
      <el-button
        class="orange"
        icon="el-icon-circle-plus-outline"
        @click="openDialog('add')"
        >新建</el-button
      >
      <el-table :data="policyList">
        <el-table-column
          label="序号"
          width="80"
          type="index"
          :index="index"
        ></el-table-column>
        <el-table-column
          label="策略名称"
          width="610"
          prop="policyName"
        ></el-table-column>
        <el-table-column
          label="策略方案"
          width="610"
          prop="discount"
        ></el-table-column>
        <el-table-column
          label="创建日期"
          width="160"
          prop="createTime"
        ></el-table-column>
        <el-table-column label="操作" width="190">
          <template #default="{ row }">
            <button type="text" class="mr" @click="lookPolicy(row.policyId)">
              查看详情
            </button>
            <button
              type="text"
              class="mr"
              @click="openDialog('edit', row.policyId)"
            >
              修改
            </button>
            <button
              type="text"
              style="background: transparent; color: #ff5a9f"
              @click="removePolicy(row.policyId)"
            >
              删除
            </button>
          </template>
        </el-table-column>
      </el-table>
      <div class="footer" v-show="showFooter">
        <span
          >共{{ totalCount }}条记录 第{{ params.pageIndex }}/{{
            totalPage
          }}页</span
        >
        <div class="btn">
          <el-button :disabled="params.pageIndex === 1" @click="prevPage"
            >上一页</el-button
          >
          <el-button @click="nextPage">下一页</el-button>
        </div>
      </div>
    </el-card>

    <el-dialog
      :visible.sync="dialogVisible"
      width="32%"
      round
      :close-on-click-modal="false"
      @close="clearForm"
    >
      <h3 slot="title">新增策略</h3>
      <el-form :model="addform" :rules="rules" ref="addform">
        <el-form-item label-width="80px" label="策略名称" prop="policyName">
          <el-input v-model="addform.policyName" placeholder="请输入策略名称">
            <template #suffix>{{ addform.policyName.length }}/15</template>
          </el-input>
        </el-form-item>
        <el-form-item label-width="80px" label="策略方案" prop="discount">
          <el-input-number
            controls-position="right"
            v-model="addform.discount"
            placeholder="请输入"
            width="100%"
            :min="0"
            :max="100"
            class="input"
          ></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button class="rouse" @click="dialogVisible = false"
            >取消</el-button
          >
          <el-button class="orange" @click="addPolicy">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
      :visible.sync="dialogVisible2"
      width="34%"
      round
      :close-on-click-modal="false"
      @close="params2.pageIndex = 1"
    >
      <h3 slot="title">策略详情</h3>
      <el-descriptions :column="1">
        <el-descriptions-item label="策略名称">{{
          detail.policyName
        }}</el-descriptions-item>
        <el-descriptions-item label="策略方案" style="width: 80px">
          <el-table :data="vendingList" header-row-class-name="table-head">
            <el-table-column
              type="index"
              :index="index2"
              label="序号"
              width="80"
            ></el-table-column>
            <el-table-column
              label="点位名称"
              prop="nodeName"
              width="150"
            ></el-table-column>
            <el-table-column
              label="设备编号"
              prop="innerCode"
              width="130"
            ></el-table-column>
          </el-table>
          <div class="footer" v-show="showFooter2">
            <span style="height: 32px; margin-right: 20px; line-height: 32px"
              >共{{ detail.totalCount }}条记录 第{{ params2.pageIndex }}/{{
                detail.totalPage
              }}页</span
            >
            <div class="btn">
              <el-button :disabled="params2.pageIndex === 1" @click="prevPage2"
                >上一页</el-button
              >
              <el-button
                @click="nextPage2"
                :disabled="params2.pageIndex === detail.totalPage"
                >下一页</el-button
              >
            </div>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import {
  getPolicyList,
  addPolicy,
  removePolicy,
  getvendingList,
  editPolicy
} from '@/apis/policy'
import { dealList, setPagination } from '@/utils/other'
import { Message } from 'element-ui'

export default {
  name: 'policy-page',
  components: {},
  props: {},
  data() {
    return {
      policyList: [],
      params: {
        pageIndex: 1,
        pageSize: 10
      },
      params2: {
        pageIndex: 1,
        pageSize: 10
      },
      form: {
        policyName: ''
      },
      totalPage: '',
      totalCount: '',
      dialogVisible: false,
      dialogVisible2: false,
      addform: {
        policyName: '',
        discount: 0
      },
      rules: {
        policyName: [
          { required: true, message: '请输入策略名称', trigger: 'blur' }
        ],
        discount: [
          { required: true, message: '请输入策略方案', trigger: 'blur' }
        ]
      },
      vendingList: [],
      detail: {
        policyId: '',
        policyName: '',
        totalCount: '',
        totalPage: ''
      },
      type: 'add',
      id: ''
    }
  },
  computed: {
    showFooter() {
      return this.totalPage > 1
    },
    showFooter2() {
      return this.detail.totalPage > 1
    }
  },
  watch: {},
  created() {
    this.getPolicyList(this.params)
  },
  methods: {
    async getPolicyList(value) {
      const res = await getPolicyList(value)
      setPagination(this, res)
      this.policyList = dealList(res.currentPageRecords)
    },
    index(index) {
      return (this.params.pageIndex - 1) * 10 + index + 1
    },
    index2(index) {
      return (this.params2.pageIndex - 1) * 10 + index + 1
    },
    prevPage() {
      this.params.pageIndex -= 1
      this.getPolicyList(this.params)
    },
    nextPage() {
      this.params.pageIndex += 1
      this.getPolicyList(this.params)
    },
    prevPage2() {
      this.params2.pageIndex -= 1
      this.lookPolicy(this.detail.policyId)
    },
    nextPage2() {
      this.params2.pageIndex += 1
      this.lookPolicy(this.detail.policyId)
    },
    search() {
      this.getPolicyList({ ...this.form, ...this.params })
    },
    clearForm() {
      this.$refs.addform.resetFields()
      this.addform.policyName = ''
      this.addform.discount = 0
    },
    async addPolicy() {
      if (this.type === 'add') {
        try {
          await this.$refs.addform.validate()
          const res = await addPolicy(this.addform)
          if (res) {
            Message.success('添加策略成功')
          }
          this.dialogVisible = false
        } catch (error) {
          console.log(error)
        }
      } else {
        await editPolicy(this.id, this.addform)
        Message.success('修改策略成功')
      }
      this.dialogVisible = false
      this.getPolicyList(this.params)
    },
    async removePolicy(id) {
      await removePolicy(id)
    },
    async lookPolicy(id) {
      this.dialogVisible2 = true
      const obj = this.policyList.filter((item) => item.policyId === id)[0]
      this.detail.policyName = obj.policyName
      const { data } = await getvendingList(id, this.params2)
      this.vendingList = data.currentPageRecords
      setPagination(this.detail, data)
      this.detail.policyId = id
    },
    async openDialog(type, id) {
      this.dialogVisible = true
      this.type = type
      if (type === 'edit') {
        const obj = this.policyList.filter((item) => item.policyId === id)[0]
        this.addform.policyName = obj.policyName
        this.addform.discount = obj.discount
        this.id = id
      }
    }
  }
}
</script>

<style scoped lang="scss">
.search {
  background-color: #5f84ff;
  color: #fff;
  &:hover {
    background-color: #5373e0;
  }
}
.orange {
  background-image: linear-gradient(135deg, #ff9949, #ff6021);
  color: #fff;
  font-size: 14px;
}
.rouse {
  background-color: #fbf4f0;
}
.el-table {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue,
    Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}
.mr {
  margin-right: 20px;
  background-color: transparent;
  color: #5f84ff;
}
::v-deep .el-dialog__wrapper {
  .el-dialog {
    border-radius: 10px;
    .el-dialog__body {
      padding: 20px 75px !important;
      .el-form {
        .el-form-item__content {
          display: flex;
          justify-content: center;
          .el-button {
            margin: 0 10px;
          }
        }
      }
    }
  }
}
.input {
  width: 100%;
}
.footer {
  height: 96px;
  padding: 32px 16px;
  box-sizing: border-box;
  span {
    float: left;
    color: #dbe2ec;
  }
  .btn {
    float: right;
    .el-button {
      width: 70px;
      height: 32px;
      padding: 0;
      text-align: center;
      line-height: 32px;
      background-color: #d5ddf8;
    }
  }
}
::v-deep .el-descriptions-item__content {
  flex-direction: column;
}
// ::v-deep .el-descriptions-item__label.has-colon {
//   width: 80px !important;
// }
.el-table {
  ::v-deep th {
    background-color: #f3f6fb !important;
  }
}
</style>
